<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-08-15 12:15:11
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-11-18 15:11:33
 * @FilePath: \orderApp\packageOne\pages\foodReview\components\comment.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="">
    <uv-popup
      ref="popup"
      mode="bottom"
      :close-on-click-overlay="false"
      custom-style="height: 85vh;"
      round="15"
      :overlayStyle="{ 'touch-action': 'none' }"
      :overlay="false"
    >
      <view class="contain" :style="{ '--bot': bottom + 8 + 'px' }" v-if="showpop">
        <p class="title">菜肴评价</p>
        <view class="closeBox" @click="closePop">
          <uv-icon name="close"></uv-icon>
        </view>
        <view class="wrap">
          <view class="flex rate">
            <text>菜肴评级</text>
            <cu-rate size="22" @change="changerate" v-model="commentObj.score"></cu-rate>
          </view>
          <view class="textarea">
            <uv-textarea
              v-model="commentObj.wordage"
              count
              placeholder="请输入菜肴评价"
              height="120"
              customStyle="{border-radios:15rpx}"
            ></uv-textarea>
          </view>
          <view class="rateBox">
            <view class="flex rate">
              <text>外观评级</text>
              <cu-rate size="22" v-model="commentObj.dishAppearance"></cu-rate>
            </view>
            <view class="flex rate">
              <text>口味评级</text>
              <cu-rate size="22" v-model="commentObj.dishFlavor"></cu-rate>
            </view>
            <view class="flex rate">
              <text>食材评级</text>
              <cu-rate size="22" v-model="commentObj.dishMaterial"></cu-rate>
            </view>
          </view>
          <p class="subtit">添加图片</p>
          <cu-upload ref="uploadRef"></cu-upload>
        </view>
        <view class="bottom">
          <view class="btnBox">
            <uv-button
              shape="circle"
              color="#00754A"
              @click="saveAdvice"
              :disabled="!commentObj.score"
            >
              <span style="font-size: 31rpx">发布评价</span>
            </uv-button>
          </view>
        </view>
      </view>
    </uv-popup>
    <cu-notice ref="notice" tips="发布成功"></cu-notice>
    <cu-tips ref="tipsRef" @cancel="unSave" @confirm="save"></cu-tips>
  </view>
</template>

<script lang="ts" setup>
//
import { useUserStore } from "@/store";
import {
  reqAdviceDraft,
  saveComplainAdvice,
  saveAdviceDraft,
  deleteAdviceDraft,
} from "@/service/business/goods";

import { Complain } from "@/service/business/goods/type";
const userStore = useUserStore();

const bottom = ref(userStore.pinia_SafeVal.bottom);
const emits = defineEmits<(e: "close") => void>();

const props = defineProps({
  reqParams:Object,
})

// 是否展示pop，应为星星内部组件第一次渲染时需要获取宽度，但页面初始渲染时宽度为0需要在pop展示时去执行星星的生命周期获取高度
const showpop = ref(false);
const popup = ref(null);

const commentOrigin = () => ({
  anonymous: userStore.userInfo.user.anonymous,
  dishAppearance: 0,
  dishFlavor: 0,
  dishMaterial: 0,
  evaluateDocument: null,
  kitchenId: userStore.userInfo.user.kitchenId,
  recipedtlId: null,
  score: 0,
  userId: userStore.userInfo.user.userId,
  wordage: null,
});

// 点评分数信息
const commentObj = ref(commentOrigin());

// 改变菜肴评级联动其他评分
function changerate() {
  commentObj.value.dishAppearance = commentObj.value.score;
  commentObj.value.dishFlavor = commentObj.value.score;
  commentObj.value.dishMaterial = commentObj.value.score;
}
// 打开菜肴评价弹窗
const open = (id) => {
  commentObj.value.recipedtlId = id;
  getAdviceDraft(id);
  showpop.value = true;
  popup.value.open();
};

// 获取评价信息
const getAdviceDraft = (recipedtlId) => {
  reqAdviceDraft({ recipedtlId }).then((res) => {
    if (res.retCode == 2000 && res.data) {
      commentObj.value.score = res.data.score / 2;
      commentObj.value.dishAppearance = res.data.dishAppearance / 2;
      commentObj.value.dishMaterial = res.data.dishMaterial / 2;
      commentObj.value.dishFlavor = res.data.dishFlavor / 2;
      commentObj.value.wordage = res.data.wordage;
      commentObj.value.evaluateDocument = res.data.evaluateDocument
        ? res.data.evaluateDocument.split(",")
        : [];
      uploadRef.value.imageList = res.data.evaluateDocument
        ? res.data.evaluateDocument.split(",")
        : [];
    }
  });
};

const tipsRef = ref(null);

// 关闭评价弹窗
const closePop = () => {
  if (
    commentObj.value.score ||
    commentObj.value.wordage ||
    commentObj.value.evaluateDocument ||
    commentObj.value.dishAppearance ||
    commentObj.value.dishMaterial ||
    commentObj.value.dishFlavor
  ) {
    tipsRef.value.open();
  } else {
    popup.value.close();
    emits("close");
  }
};

// 删除草稿
const unSave = () => {
  deleteAdviceDraft({ recipedtlId: commentObj.value.recipedtlId }).then((res) => {
    if (res.retCode == 2000) {
    }
  });
  popup.value.close();
  emits("close");
  commentObj.value = commentOrigin()
  uploadRef.value.imageList = []
};

const save = () => {
  popup.value.close();
  emits("close");
  saveDraft();
};

// 保存评价草稿
const saveDraft = () => {
  commentObj.value.evaluateDocument = uploadRef.value.uploadList.join(",");
  let param = {
    eatDate:props.reqParams.eatDate,
    mealTime:props.reqParams.mealTime,
  };
  for (let key in commentObj.value) {
    if (["dishAppearance", "dishFlavor", "dishMaterial", "score"].includes(key)) {
      param[key] = commentObj.value[key] * 2;
    } else {
      param[key] = commentObj.value[key];
    }
  }
  saveAdviceDraft(param).then((res) => {
    if (res.retCode == 2000) {
    }
  });
};

const uploadRef = ref(null);
const notice = ref(null);
// 提交菜肴点评
const saveAdvice = async () => {
  commentObj.value.evaluateDocument = uploadRef.value.uploadList.join(",");
  let param = {
    eatDate:props.reqParams.eatDate,
    mealTime:props.reqParams.mealTime,
    dishCode:props.reqParams.dishCode,
  };
  for (let key in commentObj.value) {
    if (["dishAppearance", "dishFlavor", "dishMaterial", "score"].includes(key)) {
      param[key] = commentObj.value[key] * 2;
    } else {
      param[key] = commentObj.value[key];
    }
  }
  saveComplainAdvice(param).then((res) => {
    if (res.retCode == 2000) {
      notice.value.show();
      setTimeout(() => {
        popup.value.close();
        emits("close");
        uni.navigateBack()
      }, 1500);
    }
  });
};
defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.contain {
  height: 100%;
  position: relative;
  .title {
    font-weight: 600;
    font-size: 31rpx;
    color: #000000;
    line-height: 46rpx;
    text-align: center;
    height: 75rpx;
    line-height: 75rpx;
  }

  .closeBox {
    position: absolute;
    top: 30rpx;
    right: 30rpx;
  }
}
//
.wrap {
  padding: 31rpx;
  font-size: 27rpx;
  height: 70%;
  overflow-y: auto;
  .rate {
    height: 42rpx;
    display: flex;
    align-items: center;
    margin-bottom: 32.69rpx;
  }
  .rateBox {
    padding-top: 30.77rpx;
    border-top: 1rpx solid #e7e8eb;
    border-bottom: 1rpx solid #e7e8eb;
  }
  .textarea {
    margin-bottom: 32.69rpx;
  }
  .subtit {
    font-weight: 600;
    font-size: 27rpx;
    color: #111111;
    // line-height: 42rpx;
    margin: 24rpx 0;
  }

  .advItem {
    margin: 8rpx 12rpx;
  }
}

.bottom {
  width: 100%;
  background: rgba(212, 233, 226, 0.6);
  border-radius: 23rpx 23rpx 0rpx 0rpx;
  position: fixed;
  bottom: 0;
  .btnBox {
    width: 100%;
    background: #fff;
    padding: 15rpx 31rpx var(--bot) 31rpx;
    border-radius: 23rpx 23rpx 0rpx 0rpx;
    box-sizing: border-box;
  }
}
</style>
